<template>
  <div class="nav-menu">
    <n-menu v-model:value="activeKey" :expand-icon="expandIcon" :options="menuOptions"
      :mode="themeStore.navMode === 'top' ? 'horizontal' : 'vertical'" :indent="10" :collapsed-icon-size="22"
      :collapsed-width="64" :collapsed="collapsed" @update:value="handleUpdateValue" :expanded-keys="expandedKeys"
      @update:expanded-keys="handleUpdateExpandedKeys" :default-expanded-keys="defaultExpandedKeys" accordion />
  </div>
</template>

<script setup>
import { ref, h, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useThemeStore } from '@/stores/theme'
import { NIcon, NButton } from 'naive-ui'
import * as Icons from '@vicons/antd'
import routes from '@/router/route'

const router = useRouter()
const route = useRoute()
const themeStore = useThemeStore()

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})
const expandIcon = () => {
  return h(NIcon, null, { default: () => h(Icons.CaretDownOutlined) })
}
// 当前激活的菜单项
const activeKey = ref(route.path)

// 展开的菜单项
const expandedKeys = ref([])

// 获取当前路由的父级路径
const getParentPath = (path) => {
  const pathArr = path.split('/')
  pathArr.pop()
  return pathArr.join('/')
}

// 默认展开当前路由的父级菜单
const initExpandedKeys = () => {
  const currentPath = route.path
  const parentPath = getParentPath(currentPath)
  if (parentPath) {
    expandedKeys.value = [parentPath]
  }
}

// 监听路由变化，更新展开的菜单
watch(() => route.path, (newPath) => {
  activeKey.value = newPath
  const parentPath = getParentPath(newPath)
  if (parentPath && !expandedKeys.value.includes(parentPath)) {
    expandedKeys.value = [...expandedKeys.value, parentPath]
  }
}, { immediate: true })

// 默认展开所有菜单
const defaultExpandedKeys = computed(() => {
  return menuOptions.value
    .filter(item => item.children)
    .map(item => item.key)
})

// 菜单配置
const menuOptions = computed(() => {
  const r = routes.map(item => {
    return {
      label: item.label || item.meta?.title,
      key: item.path,
      hideMenu:item.hideMenu,
      icon: item.icon ? renderIcon(Icons[item.icon]) : null,
      children: item.children?.map(child => ({
        label: child.label || child.meta?.title,
        key: child.key || `${item.path}/${child.path}`,
        icon: child.icon ? renderIcon(Icons[child.icon]) : null
      }))
    }
  }).filter(item => !item.hideMenu)
  console.log(r)
  return [
    {
      label: '仪表盘',
      key: '/dashboard',
      icon: renderIcon(Icons.DashboardOutlined)
    },
    ...r
    // ... 其他菜单项
  ]
})

// 渲染图标
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 处理菜单点击
function handleUpdateValue(key) {
  router.push(key)
}

// 处理菜单展开/收起
function handleUpdateExpandedKeys(keys) {
  expandedKeys.value = keys
}

// 初始化展开的菜单
initExpandedKeys()
</script>

<style lang="scss">
.n-menu-item {

  .n-menu-item-content__icon,
  .n-menu-item-content-header {
    color: #fff !important;
  }
}

.n-menu .n-menu-item-content.n-menu-item-content--selected::before {
  background: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
}

.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
  background: none !important;
}

.n-menu-item-content--selected {
  background: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;

  .n-menu-item-content__icon i {
    color: #fff !important;
  }

  .n-menu-item-content-header {
    background: transparent !important;
  }
}

.menu-item-content:hover {
  background: var(--primary-color) !important;
}

.n-dropdown-option {
  width: 180px !important;

}

.n-menu--vertical {
  .n-dropdown-menu {
    transform: translateX(60px) !important;
  }
}
</style>

<style lang="scss" scoped>
.nav-menu {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.n-menu) {
    flex: 1;
  }

  :deep(.n-menu-item-content) {
    &:hover {
      color: var(--primary-color);
    }

    &.n-menu-item-content--selected {
      background-color: var(--primary-bg);
      color: var(--primary-color);
    }

    .n-icon {
      margin-right: 5px;
    }
  }

  :deep(.n-submenu) {
    .n-submenu-children {
      background-color: var(--bg-container);
    }

    .n-submenu-icon {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

:deep(.n-menu--vertical) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
}

:deep(.n-menu-item-content__icon) {
  margin-right: 5px;

  .n-icon {
    font-size: 18px;
  }
}

:deep(.n-submenu-children) {
  overflow: hidden;
}

:deep(.n-menu--collapsed) {
  .n-menu-item-content {
    padding: 0 !important;
    justify-content: center;
  }

  .n-menu-item-content__icon {
    margin-right: 0;
  }

  .n-submenu-icon {
    display: none;
  }
}
</style>